<template>
  <div id="organizationChart" class="views">
    <div class="pageMain">
      <el-col :span="5" style="height: 100%">
        <div class="treeContent">
          <el-row class="treeHead">
            <el-col :span="24" class="treeHeadRight">
              <!-- <span class="AddText" v-if="jurisdictionControl.J_AddFirm" @click="treeoperation({level: 0}, 'add')">
                <i class="iconfont">&#xe6ac;</i>
                <span>添加企业</span>
              </span> -->
            </el-col>
          </el-row>
          <div class="treeMain">
            <el-tree :data="treeData" @node-click="treeNodeClick" nodeKey="subid" ref="gs_tree" :props="defaultProps" :render-content="renderContent" v-loading="treeLoading"></el-tree>
          </div>
        </div>
      </el-col>
      <el-col :span="19" style="height: 100%">
        <div class="oper-nav">
          <div class="search-from">
            <!-- <el-input class="input-dep" clearable v-model="searchParams.deptKeyWord" type="text" placeholder="部门名称"></el-input> -->
            <el-input class="input-name" @clear="clearInput" clearable v-model="searchParams.keyWord" type="text" placeholder="员工真实姓名/员工用户名/工号/手机号"></el-input>
            <el-button type="primary" :loading="sectiontreeLoading" @click="getsectionData">搜索</el-button>
            <el-radio-group @change="getsectionData" v-model="searchParams.positionStatus">
              <el-radio :label="1">在职</el-radio>
              <el-radio :label="2">离职</el-radio>
            </el-radio-group>
            <div class="text" style="font-size: 12px; margin-left: 30px" v-if="env != 'newProd'">普通用户剩余数{{ infoTest.ordinaryUserSurpluscount }} 系统用户剩余数{{ infoTest.systemUserSurpluscount }}</div>
          </div>
          <div class="search-btns" v-if="treeData.length != 0">
            <el-button type="primary" @click="exportUser">导入员工</el-button>
            <el-button v-if="jurisdictionControl.J_AddDep" @click="sectiontreeoperation({ level: 0 }, 'add')" type="primary" round>添加部门</el-button>
          </div>
        </div>
        <div class="tableContent">
          <div class="header">
            <span class="title">部门名称</span>
            <span class="title">员工数</span>
            <span class="title">负责人</span>
            <!-- <span class="title"><el-button class="addbtn" v-if="jurisdictionControl.J_AddDep" @click="sectiontreeoperation({level: 0}, 'add')" type="primary" round>添加部门</el-button></span> -->
          </div>
          <div class="treeMain">
            <el-tree :data="treedepartmentData" nodeKey="id" :props="departmentdefaultProps" @node-expand="nodeExpand" @node-collapse="nodeCollapse" :default-expanded-keys="expanded" :render-content="sectionrenderContent" :indent="0" v-loading="sectiontreeLoading"></el-tree>
          </div>
        </div>
      </el-col>
    </div>
    <!-- 删除弹框 -->
    <delPopup @delPostConfirm="delTreeNodePost" :delPopup="delPopup" />
    <!-- 新增修改部门弹框 -->
    <el-dialog :title="depTreeChangePopup.title" :visible.sync="depTreeChangePopup.isShow" width="380px" @closed="handleClose">
      <el-form :model="industryParams" :rules="rules" ref="depForm" label-width="100px" style="padding: 40px 0">
        <el-form-item label="部门名称" prop="departmentName">
          <el-input v-model.trim="industryParams.departmentName" placeholder="请输入部门名称"></el-input>
        </el-form-item>
        <!-- v-if="jurisdictionControl.J_SetPrincipal" -->
        <el-form-item label="负责人" prop="personId">
          <el-select v-model="industryParams.personId" placeholder="请选择负责人" filterable>
            <el-option v-for="item in userList" :key="item.userid" :label="item.realName || item.userName" :value="item.userid"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="medium" @click="depTreeChangePopup.isShow = false" round>取 消</el-button>
        <el-button size="medium" type="primary" @click="changeDep" round :loading="isConfirmLoading">保 存</el-button>
      </span>
    </el-dialog>
    <!-- 导入员工dialog -->
    <export-user-dialog :subCompanyId="paramsData.subid" :exportUserDialog.sync="exportUserDialog" />
  </div>
</template>
<script>
import { mixinsMethod } from "@/util/util";
import { mapState } from "vuex";
import exportUserDialog from "./components/exportUserDialog.vue";
import delPopup from "@/components/delPopup";
import { GetSubCompanyDataView } from "@/hooks/update";
export default {
  name: "organizationChart",
  components: {
    delPopup,
    exportUserDialog,
  },
  data() {
    return {
      env: process.env.NODE_ENV,
      jurisdictionControl: {
        // 权限
        J_AddDep: false, // 新增部门
        J_EditDep: false, // 修改部门
        J_DelDep: false, // 删除部门
        // J_AddFirm: false, // 新增企业
        // J_EditFirm: false, // 修改企业
        // J_DelFirm: false, // 删除企业
        J_AddUser: false, // 新增职员
        J_EditUser: false, // 修改职员
        J_DelUser: false, // 删除职员
        // J_SetPrincipal: false, //设置部门负责人
      },
      defaultProps: {
        children: "subList",
        label: "subName",
      },
      departmentdefaultProps: {
        children: "mergeList",
        label: "name",
      },
      treeLoading: false,
      sectiontreeLoading: false,
      treedepartmentData: [],
      treeData: [],
      paramsData: {},
      userList: [],
      delPopup: {
        // 删除
        title: "",
        isShow: false,
        describe: "",
      },
      industryParams: {
        // 部门添加修改 params
        departmentName: "", // 部门名称
        companyid: "", // 企业id
        level: "", // 级次
        parentid: 0, // 父级id
        personId: "", //  负责人id
        subid: "", // 子公司id
      },
      depTreeChangePopup: {
        // 部门添加修改弹框
        title: "",
        isShow: false,
        type: "",
      },
      delDepParams: {}, //删除部门
      delStaffParams: {}, // 删除职员
      isConfirmLoading: false, // 确认的loading
      userCount: 0, // 临时存储员工数
      expanded: [],
      rules: {
        departmentName: [
          { required: true, message: "请输入部门名称", trigger: "blur" },
          { min: 1, max: 10, message: "长度在 3 到 10 个字符", trigger: "blur" },
        ],
        personId: [{ required: false, message: "请选择负责人", trigger: "chage" }],
      },
      exportUserDialog: false, //控制导入员工dialog的显示
      searchParams: {
        positionStatus: 1,
        deptKeyWord: "",
        keyWord: "",
      },
      infoTest: {},
    };
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.common.userInfo,
      moduleId: (state) => state.common.moduleId,
    }),
  },
  watch: {
    exportUserDialog(newVal) {
      //导入员工dialog关闭
      if (newVal) return;
      this.getsectionData(); //获取部门职员树
    },
  },
  methods: {
    async GetSystemUserNum() {
      const { data } = await this.$api.systemManagement.GetSystemUserNum();
      this.infoTest = data.data;
    },
    clearInput() {
      //清空查询条件
      this.getsectionData(); //获取部门职员树
    },
    exportUser() {
      //导入员工
      this.exportUserDialog = true;
    },
    setTreeData(data) {
      // 公司树初始化
      data.map((item) => {
        item.is_show = false;
        if (item.subList && item.subList.length != 0) {
          item.icons = "1";
          this.setTreeData(item.subList);
        } else {
          item.icons = "2";
        }
      });
    },

    getTreeData(type, ischange) {
      // 获取公司树
      this.GetSystemUserNum();
      this.treeLoading = true;
      this.$api.systemManagement.GetStructureSubCompanyTree().then((res) => {
        let resData = res.data.data;
        this.treeLoading = false;
        if (!resData || resData.length == 0) return;
        this.setTreeData(resData);
        // 默认查询有权限查看的第一个公司部门
        let arr = [];
        for (let index = 0; index < resData.length; index++) {
          const element = resData[index];
          if (element.isSelect) {
            arr.push({
              ...element,
              index,
            });
            break;
          }
        }
        this.paramsData = { subid: arr[0].subid };
        this.getsectionData(); // 获取最新的用户信息
        this.getUserList1(ischange ? 1 : 0); // 获取最新的负责人
        this.treeData = resData;
        if (type == 1) {
          // 默认选中
          this.$nextTick(() => {
            this.$refs.gs_tree.setCurrentKey(this.treeData[arr[0].index].subid);
          });
        }
      });
    },

    getsectionData() {
      // 获取部门职员树
      this.sectiontreeLoading = true;
      this.$api.systemManagement
        .GetStructureDepartmentTree({ ...this.paramsData, ...this.searchParams })
        .then((res) => {
          let resList = res.data.data;
          this.treedepartmentData = this.getmergeListFun(resList);
          this.sectiontreeLoading = false;
        })
        .catch((err) => {
          this.sectiontreeLoading = false;
        });
    },

    getUserList1(type) {
      // 获取负责人列表
      this.$api.systemManagement.GetUserList(this.paramsData).then((res) => {
        let resData = res.data.data;
        this.userList = resData;
      });
      if (type == 1) {
        //负责人修改成功更新全部人员列表
        this.getUserList();
      }
    },

    renderContent(h, { node, data }) {
      // 自定义公司tree节点
      return (
        <span class="custom-tree-node" on-mouseenter={() => this.setis_show(data)} on-mouseleave={() => this.setis_show(data)}>
          <i v-show={data.icons == 1} class="iconfont icon-shigongdanweisel icon1"></i>
          <i v-show={data.icons == 2} class="iconfont icon-department icon2"></i>
          <span class="test_Hide name_text" title={node.label}>
            {node.label}
          </span>
          <span class="pull_right" v-show={data.is_show || data.subid == this.treeData[0].subid}>
            <i class="iconfont" title="查看" on-click={() => this.treeoperation(data, "check")}>
              &#xe65c;
            </i>
          </span>
        </span>
      );
    },

    treeoperation(data, type) {
      // 公司tree 操作
      event.stopPropagation();
      if (!data.isSelect) {
        this.$message({ message: "暂无权限", type: "warning" });
        return;
      }
      switch (type) {
        case "add":
          if (!this.jurisdictionControl.J_AddFirm) {
            this.$message({ message: "暂无权限", type: "warning" });
            return;
          }
          this.$store.commit("companyInfo/balance", true);
          this.$store.commit("companyInfo/checkCurtain", false);
          this.$store.commit("companyInfo/EditAccount", false);
          if (data.level == 0) {
            this.$router.push({ name: "editCompany", query: { jurisdictionControl: JSON.stringify(this.jurisdictionControl) } });
          } else {
            this.$store.commit("companyInfo/setPrint", data.subid); // 保存客户id
            this.$router.push({ name: "editCompany", query: { isAdd: true, subid: data.subid, jurisdictionControl: JSON.stringify(this.jurisdictionControl) } });
          }
          break;
        case "check":
          this.$router.push({ name: "checkCompany", query: { isCheck: true, jurisdictionControl: JSON.stringify(this.jurisdictionControl) } });
          this.$store.commit("companyInfo/setPrint", data.subid); // 保存客户id
          this.$store.commit("companyInfo/checkCurtain", true); // 查看状态为true
          this.$store.commit("companyInfo/balance", false); // 新建状态为 false
          this.$store.commit("companyInfo/EditAccount", false); // 编辑状态为 false
          break;
        case "edit":
          if (!this.jurisdictionControl.J_EditFirm) {
            this.$message({ message: "暂无权限", type: "warning" });
            return;
          }
          this.$router.push({ name: "editCompany", query: { isEdit: true, jurisdictionControl: JSON.stringify(this.jurisdictionControl) } });
          this.$store.commit("companyInfo/setPrint", data.subid); // 保存客户id
          this.$store.commit("companyInfo/checkCurtain", true); // 查看状态为true
          this.$store.commit("companyInfo/balance", false); // 新建状态为 false
          this.$store.commit("companyInfo/EditAccount", true); // 编辑状态为 false
          break;
        default:
          break;
      }
    },

    treeNodeClick(node) {
      // 公司树状结构点击
      if (!node.isSelect) {
        this.$message({ message: "暂无权限", type: "warning" });
        return;
      }
      this.paramsData = { subid: node.subid };
      this.getsectionData();
      this.getUserList1();
    },

    getuserCount(data, userCount, istype) {
      // 获取员工数
      if (userCount) {
        this.userCount = Number(userCount);
      }
      if (istype) {
        data.map((item) => {
          this.userCount += Number(item.userCount);
          if (item.childrenList && item.childrenList.length != 0) {
            this.getuserCount(item.childrenList, false, true);
          }
        });
        return;
      }
      if (data.childrenList && data.childrenList.length != 0) {
        data.childrenList.map((item) => {
          this.userCount += Number(item.userCount);
          if (item.childrenList && item.childrenList.length != 0) {
            this.getuserCount(item.childrenList, false, true);
          }
        });
        return;
      }
    },

    getmergeListFun(resList, level) {
      // 部门职员数据初始化
      resList.map((item) => {
        item.isbranch = true;
        item.is_show = false;
        item.level = level ? level + 1 : 1;
        this.getuserCount(item, item.userCount);
        item.userCount = this.userCount;
        this.userCount = 0;
        if (item.childrenList && item.childrenList.length != 0) {
          this.getmergeListFun(item.childrenList, item.level);
        }
        if (item.userList && item.userList.length != 0) {
          item.userList.map((i) => {
            i.isbranch = false;
            i.is_show = false;
            i.level = item.level + 1;
          });
        }
        if (item.userList) {
          item.mergeList = item.userList;
        } else {
          item.mergeList = [];
        }
        if (item.childrenList) {
          item.mergeList = [...item.childrenList, ...item.mergeList];
        }
      });
      return resList;
    },

    setis_show(data) {
      data.is_show = !data.is_show;
    },

    sectionrenderContent(h, { data }) {
      // 自定义部门|职员 tree节点
      return (
        <span class="sectiontreenode" on-mouseenter={() => this.setis_show(data)} on-mouseleave={() => this.setis_show(data)}>
          <span class="sectionItem" style={data.level != 1 ? "padding-left:" + data.level * 5 + "px" : ""}>
            <span v-show={!data.isbranch} class="head">
              {data.realName ? data.realName.slice(-2) : data.realName}
            </span>
            <span title={data.isbranch ? data.departmentName : data.realName} style="display: inline-block;width: 100px;overflow: hidden;">
              {data.isbranch ? data.departmentName : data.realName}
            </span>
          </span>
          <span class="sectionItem">{data.isbranch ? data.userCount : data.phone}</span>
          <span class="sectionItem textcenter">{data.isbranch ? data.personName : data.roleName}</span>
          <div class="operation sectionItem">
            <i class="iconfont" v-show={this.searchParams.positionStatus != 2 && this.jurisdictionControl.J_AddUser && data.isbranch && (data.is_show || data.id == this.treedepartmentData[0].id)} title="新增员工" on-click={() => this.sectiontreeoperation(data, "adduser")}>
              &#xe633;
            </i>
            <i class="iconfont" v-show={(this.searchParams.positionStatus == 2 && !data.isbranch || this.searchParams.positionStatus == 1) && this.jurisdictionControl.J_EditDep && data.isbranch && (data.is_show || data.id == this.treedepartmentData[0].id) || this.jurisdictionControl.J_EditUser && !data.isbranch && (data.is_show || data.id == this.treedepartmentData[0].id)} title={data.isbranch ? "编辑部门" : "编辑员工"} on-click={() => this.sectiontreeoperation(data, "edit")}>
              &#xe631;
            </i>
            <i class="iconfont" v-show={this.searchParams.positionStatus != 2 && this.jurisdictionControl.J_AddDep && data.isbranch && (data.is_show || data.id == this.treedepartmentData[0].id)} title="新增部门" on-click={() => this.sectiontreeoperation(data, "add")}>
              &#xe632;
            </i>
            <i class="iconfont" v-show={this.searchParams.positionStatus != 2 && this.jurisdictionControl.J_DelDep && data.isbranch && (data.is_show || data.id == this.treedepartmentData[0].id) || this.searchParams.positionStatus != 2 && this.jurisdictionControl.J_DelUser && !data.isbranch && (data.is_show || data.id == this.treedepartmentData[0].id)} title={data.isbranch ? "删除部门" : "删除员工"} on-click={() => this.sectiontreeoperation(data, "del")}>
              &#xe612;
            </i>
          </div>
        </span>
      );
    },
    nodeExpand(node) {
      this.expanded.push(node.id);
    },
    nodeCollapse(node) {
      let index = this.expanded.indexOf(node.id);
      this.expanded.splice(index, 1);
    },

    sectiontreeoperation(data, type) {
      // 部门 | 职员tree 操作
      debugger;
      event.stopPropagation();
      if (!data.isSelect && data.level != 0) {
        this.$message({ message: "暂无编辑权限", type: "warning" });
        return;
      }
      switch (type) {
        case "adduser": // 新增用户
          if (!this.jurisdictionControl.J_AddUser) {
            this.$message({ message: "暂无权限", type: "warning" });
            return;
          }
          sessionStorage.removeItem("staffInfo");
          this.$router.push({ name: "addUser", query: { type: "isAddJump", departmentid: data.departmentid, subid: data.subid, randomNum: Math.floor(Math.random() * 900) + 100 } });
          break;
        case "add":
          if (!this.jurisdictionControl.J_AddDep) {
            this.$message({ message: "暂无权限", type: "warning" });
            return;
          }
          this.cleardepTreeForm();
          this.industryParams = {
            departmentName: "", // 部门名称
            companyid: this.userInfo.CompanyId, // 企业id
            level: data.level + 1, // 级次
            parentid: data.departmentid || "", // 父级id
            rootid: data.rootid || "", //
            personId: "", //  负责人id
            subid: this.paramsData.subid, // 子公司id
          };
          this.depTreeChangePopup = {
            title: "部门添加",
            isShow: true,
            type: "add",
          };
          break;
        case "edit":
          if (data.isbranch) {
            // 修改部门
            if (!this.jurisdictionControl.J_EditDep) {
              this.$message({ message: "暂无权限", type: "warning" });
              return;
            }
            let personId;
            let user = this.userList.find((item) => {
              // 2022.04.26 负责人列表是否存在 此 id
              return item.userid == data.personId;
            });
            if (data.personId && data.personId != "00000000-0000-0000-0000-000000000000" && user) {
              personId = data.personId;
            }
            this.industryParams = {
              id: data.id,
              departmentName: data.departmentName, // name
              departmentid: data.departmentid, //  部门id
              personId, //  负责人id
              subid: this.paramsData.subid, // 子公司id
            };
            this.depTreeChangePopup = {
              title: "部门修改",
              isShow: true,
              type: "edit",
            };
          } else {
            // 修改用户
            if (!this.jurisdictionControl.J_EditUser) {
              this.$message({ message: "暂无权限", type: "warning" });
              return;
            }
            this.$router.push({ name: "editUser", query: { type: "isChangeJump", id: data.id, subid: data.subid, randomNum: Math.floor(Math.random() * 900) + 100 } });
            sessionStorage.setItem("staffInfo", JSON.stringify(data));
          }
          break;
        case "del":
          if (data.isbranch) {
            // 删除部门
            if (!this.jurisdictionControl.J_DelDep) {
              this.$message({ message: "暂无权限", type: "warning" });
              return;
            }
            this.delDepParams = {
              id: data.id,
              departmentid: data.departmentid, //  部门id
              parentid: data.departmentid, // 父级id
              subid: this.paramsData.subid, // 子公司id
            };
            this.delPopup = {
              title: "删除部门",
              isShow: true,
              describe: "确定删除该部门吗？",
              istype: 1,
            };
          } else {
            // 删除用户
            if (!this.jurisdictionControl.J_DelUser) {
              this.$message({ message: "暂无权限", type: "warning" });
              return;
            }
            this.delStaffParams = {
              id: data.id,
              userid: data.userid,
              subid: this.paramsData.subid, // 子公司id
              positionStatus: this.searchParams.positionStatus == 1 ? 2 : 1,
            };
            this.delPopup = {
              title: "删除职员",
              isShow: true,
              describe: "确定删除该职员吗？",
            };
          }
          break;
        default:
          break;
      }
    },

    changeDep() {
      // 新增修改部门
      this.$refs["depForm"].validate((valid) => {
        if (valid) {
          this.isConfirmLoading = true;
          switch (this.depTreeChangePopup.type) {
            case "add":
              let params = {
                ...this.industryParams,
                subid: this.paramsData.subid,
                islets: true,
              };
              this.$api.systemManagement
                .DepartmentEdit(params, 1)
                .then((res) => {
                  if (res.data.status === 200) {
                    this.$notify({
                      title: "成功",
                      message: "新增部门成功",
                      type: "success",
                      duration: 1500,
                    });
                    this.depTreeChangePopup.isShow = false;
                    this.getsectionData();
                    GetSubCompanyDataView(this); // 更新公司部门树
                  }
                  setTimeout(() => {
                    // 延迟开启确认
                    this.isConfirmLoading = false;
                  }, 500);
                })
                .catch(() => {
                  this.isConfirmLoading = false;
                });
              break;
            case "edit":
              let params1 = {
                ...this.industryParams,
                subid: this.paramsData.subid,
              };
              this.$api.systemManagement
                .DepartmentEdit(params1, 2)
                .then((res) => {
                  if (res.data.status === 200) {
                    this.$notify({
                      title: "成功",
                      message: "修改部门成功",
                      type: "success",
                      duration: 1500,
                    });
                    this.depTreeChangePopup.isShow = false;
                    this.getsectionData();
                    GetSubCompanyDataView(this); // 更新公司部门树
                  }
                  setTimeout(() => {
                    // 延迟开启确认
                    this.isConfirmLoading = false;
                  }, 500);
                })
                .catch(() => {
                  this.isConfirmLoading = false;
                });
              break;
            default:
              break;
          }
        } else {
          return false;
        }
      });
    },

    delTreeNodePost() {
      // tree 删除部门或者职员的请求
      if (this.delPopup.istype == "1") {
        let params = {
          ...this.delDepParams,
          subid: this.paramsData.subid,
        };
        this.$api.systemManagement.DeleteDepartment(params).then((res) => {
          if (res.data.status === 200) {
            this.$message({ message: "删除成功", type: "success" });
          }
          this.delPopup.isShow = false;
          this.getsectionData();
          GetSubCompanyDataView(this); // 更新公司部门树
        });
      } else {
        this.$api.systemManagement.DeleteUser(this.delStaffParams).then((res) => {
          if (res.data.status === 200) {
            this.$message({ message: "删除成功", type: "success" });
          }
          this.delPopup.isShow = false;
          this.getsectionData();
          this.getUserList();
        });
      }
    },

    cleardepTreeForm() {
      // 清空表单验证
      this.$nextTick(() => {
        if (this.$refs["depForm"]) {
          this.$refs["depForm"].resetFields();
        }
      });
    },

    handleClose() {
      // 清空绑定的数据
      this.clearObjVal(this.industryParams);
    },

    getJurisdiction() {
      // 权限
      if (this.userInfo.isadmin) {
        this.jurisdictionControl = {
          J_AddDep: true, // 新增部门
          J_EditDep: true, // 修改部门
          J_DelDep: true, // 删除部门
          // J_AddFirm: true, // 新增企业
          // J_EditFirm: true, // 修改企业
          // J_DelFirm: true, // 删除企业
          J_AddUser: true, // 新增职员
          J_EditUser: true, // 修改职员
          J_DelUser: true, // 删除职员
          J_SetPrincipal: true, //设置部门负责人
        };
        return;
      }
      let params = {
        id: this.moduleId,
      };
      this.$api.publicApi.GetActionInfo(params).then((res) => {
        let resData = res.data.data;
        resData.map((item) => {
          if (item.name === "添加部门") {
            this.jurisdictionControl.J_AddDep = true;
          }
          if (item.name === "编辑部门") {
            this.jurisdictionControl.J_EditDep = true;
          }
          if (item.name === "删除部门") {
            this.jurisdictionControl.J_DelDep = true;
          }
          // if (item.name === '添加企业') {
          //   this.jurisdictionControl.J_AddFirm = true
          // }
          // if (item.name === '修改企业') {
          //   this.jurisdictionControl.J_EditFirm = true
          // }
          // if (item.name === '删除企业') {
          //   this.jurisdictionControl.J_DelFirm = true
          // }
          if (item.name === "添加员工") {
            this.jurisdictionControl.J_AddUser = true;
          }
          if (item.name === "编辑员工") {
            this.jurisdictionControl.J_EditUser = true;
          }
          if (item.name === "删除员工") {
            this.jurisdictionControl.J_DelUser = true;
          }
          // if (item.name === '设置部门负责人') {
          //   this.jurisdictionControl.J_SetPrincipal = true
          // }
        });
      });
    },
  },
  mounted() {
    this.getJurisdiction();
  },
  activated() {
    // if (this.$route.query.ischange == true) {
    //   this.getsectionData(); // 获取最新的用户信息
    //   this.getUserList1(1);// 获取最新的负责人
    // }
    this.getTreeData(1, this.$route.query.ischange);
  },
  mixins: [mixinsMethod],
};
</script>
<style lang="less">
#organizationChart {
  .pageMain {
    .el-col-5 {
      width: 330px !important;
    }
    .el-col-19 {
      width: calc(100% - 350px) !important;
    }
    height: 100% !important;
    margin-top: 0;
    .oper-nav {
      width: 100%;
      margin-left: 20px;
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .search-from {
        display: flex;
        align-items: center;
        .el-radio {
          margin-left: 15px;
          margin-right: 0px;
        }
        .el-radio__label {
          padding: 3px !important;
        }
        .el-input {
          margin-right: 20px;
        }
        .input-name {
          width: 266px;
        }
        .input-dep {
          width: 200px;
        }
        .input-name {
          width: 300px;
        }
      }
    }
    .tableContent {
      height: calc(100% - 46px);
      // height: 100%;
      border: 1px solid #e7ebf5;
      padding: 0;
      margin-left: 20px;
      .header {
        width: 100%;
        height: 36px;
        background-color: #f5f8fd;
        line-height: 36px;
        font-size: 12px;
        color: #333;
        .title {
          display: inline-block;
          width: 27%;
          height: 100%;
          color: #333;
          padding-left: 10px;
          float: left;
        }
        .title:nth-child(3) {
          text-align: center;
        }
        .title:nth-child(4) {
          width: 19%;
          position: relative;
        }
        .addbtn {
          float: right;
          margin: 3px 4px 0 0;
          // margin: 8px 8px 0 0;
        }
      }
      .sectiontreenode {
        display: flex;
        width: 100%;
        font-size: 12px;
        height: 40px;
        line-height: 40px;
        .sectionItem {
          display: inline-block;
          width: 27%;
          padding-left: 10px;
          display: flex;
          justify-content: flex-start;
          align-items: center;
        }
        .textcenter {
          text-align: center;
        }
        .operation {
          width: 19%;
          text-align: center;
          i {
            font-size: 15px;
            margin-left: 10px;
            color: #39a4ed;
          }
        }
        .head {
          display: inline-block;
          width: 25px;
          height: 25px;
          border-radius: 50%;
          background-color: #6bd0f4;
          line-height: 25px;
          text-align: center;
          margin-right: 5px;
          color: #fff;
          font-size: 12px;
        }
      }
      .el-tree-node__content {
        height: auto;
        border-bottom: 1px solid #e7ebf5;
        &:hover {
          color: #333 !important;
        }
      }
      .treeMain {
        width: 100%;
        // height: calc(100% - 45px);
        height: calc(100% - 87px);
        overflow: auto;
      }
    }
    .treeContent {
      border: 1px solid #e7ebf5;
      height: 100%;
      font-size: 14px;
      width: 100%;
      .treeHead {
        background: #f5f8fd;
        height: 36px;
        line-height: 36px;
        padding: 0 20px;
        width: 100%;
        .treeHeadRight {
          color: #6595ef;
          text-align: right;
          .AddText {
            cursor: pointer;
          }
          span {
            &:last-child {
              margin-left: 2px;
            }
          }
        }
      }
      .treeMain {
        width: 100%;
        padding: 8px 0 0 8px;
        height: calc(100% - 60px);
        overflow: auto;
        box-sizing: border-box;
        .el-tree-node {
          &:hover .iconfont {
            color: #606266;
          }
        }
        .custom-tree-node {
          display: flex;
          align-items: baseline;
          width: 88%;
          .icon1 {
            color: #f29b5c !important;
            font-size: 15px;
          }
          .icon2 {
            color: #92b5f7 !important;
            font-size: 14px;
          }
          .pull_right {
            float: right;
            .iconfont {
              font-size: 15px;
              margin-left: 10px;
              &:hover {
                color: #5c8ffc;
              }
            }
          }
          .name_text {
            margin-left: 5px;
            display: inline-block;
            width: 100%;
          }
        }
        .is-current {
          color: #39a4ed;
          background-color: #f5f7fa;
        }
      }
    }
  }
}
</style>
